<!--
 * @Descripttion: 图片上传
 * @version: 
 * @Author: hutao
 * @Date: 2021-12-30 16:07:59
 * @LastEditors: hutao
 * @LastEditTime: 2023-02-08 18:54:04
-->
<template>
  <span
    v-if="readonly && !showImg"
    style="cursor: pointer; color: var(--primary)"
  >
    <!-- <el-popover width="90"
                :disabled="!state.fileToken"
                trigger="click">

      <el-image style="width:100%"
                :preview-src-list="['/file-management-service/api/filing/file/download/'+state.fileToken]"
                :src="'/file-management-service/api/filing/file/download/'+state.fileToken"></el-image> -->
    <i
      v-if="state.fileToken.length"
      @click="state.visible = !!state.fileToken.length"
      class="el-icon-paperclip"
      >{{ state.fileToken.length }}</i
    >

    <!-- </el-popover> -->
    <el-dialog
      append-to-body
      :show-close="false"
      width="600px"
      :visible.sync="state.visible"
    >
      <el-image
        v-for="item in state.fileToken"
        :key="item"
        style="width: 50%; margin: 0 0 12px 12px"
        :preview-src-list="['/file-management-service/api/filing/file/download/' + item]"
        :src="'/file-management-service/api/filing/file/download/' + item"
      ></el-image>
    </el-dialog>
  </span>
  <div v-else style="margin-top: 8px">
    <el-upload
      style="float: left"
      class="avatar-uploader"
      accept="image/jpeg,image/png"
      action="/file-management-service/api/filing/file/upload"
      :show-file-list="false"
      :disabled="disabled || readonly"
      :on-success="fileChange"
      :before-upload="beforeAvatarUpload"
    >
      <div class="img-hover" v-if="state.fileToken.length && !multiple">
        <img
          style="width: 90px; height: 90px"
          :src="'/file-management-service/api/filing/file/download/' + state.fileToken[0]"
          class="avatar"
        />
        <span class="ht-actions el-upload-list__item-actions">
          <span @click.stop class="ht-icon-list"
            ><span class="ht-icon-show" style="margin-right: 10px">
              <i
                @click.stop="
                  state.dialogVisible = true;
                  state.current = state.fileToken[0];
                "
                class="el-icon-zoom-in"
                title="查看"
              ></i>
            </span>
            <span
              v-if="!disabled && !readonly"
              @click.stop="state.fileToken = []"
              style="margin-left: 10px"
              class="ht-icon-show"
            >
              <i class="el-icon-delete" title="删除"></i>
            </span>
          </span>
        </span>
      </div>
      <template v-else>
        <template v-if="disabled || readonly">
          <span v-if="!state.fileToken.length">--</span>
        </template>
        <template v-else>
          <i
            v-if="multiple"
            class="el-icon-plus avatar-uploader-icon"
            style="border: 1px solid #ccc"
          ></i>
        </template>
      </template>
    </el-upload>
    <div
      v-if="multiple"
      style="
        float: left;
        width: calc(100% - 100px);
        overflow: hidden;
        height: 96px;
      "
    >
      <div
        style="
          width: auto;
          display: flex;
          overflow-x: auto;
          overflow-y: hidden;
          height: 106px;
        "
      >
        <div
          class="img-hover"
          :key="item"
          style="margin-left: 8px"
          v-for="item in state.fileToken"
        >
          <el-image
            style="width: 100px; height: 100px"
            :src="'/file-management-service/api/filing/file/download/' + item"
            fit="cover"
            class="avatar"
          ></el-image>
          <span
            class="ht-actions el-upload-list__item-actions"
            style="width: 100px; height: 100px"
          >
            <span @click.stop class="ht-icon-list"
              ><span
                class="ht-icon-show"
                style="margin-right: 10px; cursor: pointer"
              >
                <i
                  @click.stop="
                    state.dialogVisible = true;
                    state.current = item;
                  "
                  class="el-icon-zoom-in"
                  title="查看"
                ></i>
              </span>
              <span
                v-if="!disabled && !readonly"
                @click.stop="delterImg(item)"
                style="margin-left: 10px; cursor: pointer"
                class="ht-icon-show"
              >
                <i class="el-icon-delete" title="删除"></i>
              </span>
            </span>
          </span>
        </div>
      </div>
    </div>

    <el-dialog
      :append-to-body="true"
      :show-close="false"
      width="400px"
      :visible.sync="state.dialogVisible"
    >
      <el-image
        style="width: 100%"
        :preview-src-list="['/file-management-service/api/filing/file/download/' + state.current]"
        :src="'/file-management-service/api/filing/file/download/' + state.current"
      ></el-image>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
interface State {
  /** 数据状态 */
  loading: boolean;
  visible: boolean;
  current?: string;
  /** 图片地址 */
  fileToken: string[];
  dialogVisible: boolean;
}
@Component
export default class Index extends Vue {
  @Prop() value!: string;
  /* 是否只读 */
  @Prop({ default: false }) readonly?: boolean;
  /** 是否禁用 */
  @Prop() disabled?: boolean;
  /** 是否可以上传多个图片 */
  @Prop() multiple?: boolean;
  @Prop() showImg?: boolean;

  /** 数据 */
  state: State = {
    loading: false,
    visible: false,
    current: undefined,
    fileToken: [],
    dialogVisible: false,
  };
  /** 生命周期 */
  /** 方法 */
  showDetails() {
    if (this.state.fileToken.length) {
      this.state.visible = true;
    } else {
      this.$notify.error("暂无图片信息");
    }
  }
  delterImg(id: string) {
    this.state.fileToken = this.state.fileToken.filter((item) => item !== id);
  }
  /** 上传文件前验证 */
  beforeAvatarUpload(file: File) {
    const isJPG = file.type === "image/jpeg";
    const isPng = file.type === "image/png";
    const isLt2M = file.size / 1024 / 1024 < 5;

    if (!isJPG && !isPng) {
      this.$message.error("只能上传 JPG 或PNG格式!");
    }
    if (!isLt2M) {
      this.$message.error("上传图片大小不能超过 5MB!");
    }
    return (isJPG || isPng) && isLt2M;
  }
  fileChange(file: { fileToken: "" }) {
    if (this.multiple) {
      this.state.fileToken.push(file.fileToken);
    } else {
      this.state.fileToken = [file.fileToken];
    }
  }
  /** 监听 */
  /** 计算属性 */
  @Watch("state.fileToken")
  onFileToken(val: string[], old: string[]) {
    this.$emit("input", val.length ? val.toString() : undefined);
    this.$emit("change", val.length ? val.toString() : undefined);
  }
  @Watch("value", { immediate: true })
  onValue(val: string) {
    if (val) {
      this.state.fileToken = val.split(",");
    } else {
      this.state.fileToken = [];
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
}
.img-hover {
  position: relative;
  .ht-actions {
    display: none;
  }
  &:hover .ht-actions {
    display: block;
  }
}
.ht-actions {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);

  color: #fff;
  .ht-icon-list {
    display: flex;
    justify-content: center;
    .ht-icon-show {
      display: block !important;
      margin-top: 30px;
    }
  }
}
</style>
